<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>Layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/css/layui.css" media="all">
	<script src="/js/jquery-1.11.1.min.js" charset="utf-8"></script>
</head>
<body>

<!-- 数据表格 -->
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!-- 右侧按钮 -->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="layer/layer.js"></script>
<script src="/js/layui.js" charset="utf-8"></script>

<script>
	layui.use(['laypage', 'layer', 'table', 'element'], function() {
		var laypage = layui.laypage //分页
				,layer = layui.layer //弹层
				,table = layui.table //表格
				,element = layui.element //元素操作

		//执行一个 table 实例
		table.render({
			elem: '#demo'
			// ,height: 420
			,id: 'table'
			,url: '/code' //数据接口
			,cellMinWidth: 80
			,title: '用户表'
			,page: true //开启分页
			,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
			,totalRow: true //开启合计行
			,cols: [
					[ //表头
				{type: 'checkbox', fixed: 'left'}
				,{field: 'tableName', title: '表名',sort: true}
				,{field: 'tableComment', title: '备注',sort: true}
				,{field: 'engine', title: 'engine',sort: true}
				,{field: 'createTime', title: '创建时间',sort: true}
				,{field:'', title: '操作', width:200, align:'center', toolbar: '#tool',fixed: 'right'}

					]
			]
		});

		//监听头工具栏事件
		table.on('toolbar(test)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id)
					,data = checkStatus.data; //获取选中的数据
			switch(obj.event){
				case 'add':
					layer.msg('添加');
					break;
				case 'update':
					if(data.length === 0){
						layer.msg('请选择一行');
					} else if(data.length > 1){
						layer.msg('只能同时编辑一个');
					} else {
						layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
					}
					break;
				case 'delete':
					if(data.length === 0){
						layer.msg('请选择一行');
					} else {
						layer.msg('删除');
					}
					break;
			};
		});

		//监听行工具事件
		table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
					,layEvent = obj.event; //获得 lay-event 对应的值

			var editList=[]; //存放获取到的那条json数据中的value值（不放key）
			$.each(data,function(name,value) {//循环遍历json数据
				editList.push(value);//将json数据中的value放入数组中（下面的子窗口显示的时候要用到）
			});

			if(layEvent === 'detail'){
				layer.msg('查看操作');
				layer.open({
					type: 1
					,offset: 'auto' //具体配置参考：offset参数项
					,content: '<div style="padding: 20px 80px;"><div><div><label>id:</label><span>'+data.id+'</span></div><div><label>姓名:</label><span>'+data.name+'</span></div><div><label>年龄:</label><span>'+data.age+'</span></div></div></div>'
					,btn: '关闭全部'
					,btnAlign: 'c' //按钮居中
					,shade: 0 //不显示遮罩
					,yes: function(){
						layer.closeAll();
					}
				});
			} else if(layEvent === 'del'){
				layer.confirm('真的删除行么', function(index){
					obj.del(); //删除对应行（tr）的DOM结构
					layer.close(index);
					//向服务端发送删除指令
				});
			} else if(layEvent === 'edit'){
				console.log(data);
				layer.msg('编辑操作');
				layer.open({
					type: 1 //Page层类型
					,area: ['800px', '600px']
					,title: '代码生成配置'
					,shade: 0.6 //遮罩透明度
					,maxmin: true //允许全屏最小化
					,anim: 1 //0-6的动画形式，-1不开启
					,content: '<div style="padding: 20px 80px;"><div>' +
							  '<div><label>表名:</label><input  id="tableName" type="text"  disabled="disabled" name="title" required lay-verify="required" value="'+data.tableName+'"  autocomplete="no" class="layui-input"></div>' +
							  '<div><label>包名:</label><input  id="packageName" type="text" name="title" required lay-verify="required" value=""  autocomplete="no" class="layui-input"></div>' +
							  '<div><label>模块:</label><input  id="moduleName" type="text" name="title" required lay-verify="required" value=""  autocomplete="no" class="layui-input"></div>' +
							  '<div><label>作者:</label><input  id="author" type="text" name="title" required lay-verify="required" value=""  autocomplete="no" class="layui-input"></div>' +
							  '<div><label>前缀:</label><input  id="tablePrefix" type="text" name="title" required lay-verify="required" value=""  autocomplete="no" class="layui-input"></div>' +
							  '<div><label>注释:</label><input  id="comments" type="text" name="title" required lay-verify="required" value=""  autocomplete="no" class="layui-input"></div>'
					,btn: '生成'
					,btnAlign: 'c' //按钮居中
					,shade: 0 //不显示遮罩
					,yes: function(obj){
						    console.log(data);
							var url = "/generator/code";//代码生成接口
							var form = $("<form></form>").attr("action", url).attr("method", "post");
							form.append($("<input></input>").attr("type", "hidden").attr("name", "tableName").attr("value", data.tableName));
						    form.append($("<input></input>").attr("type", "hidden").attr("name", "packageName").attr("value", $("#packageName").val()));
						    form.append($("<input></input>").attr("type", "hidden").attr("name", "moduleName").attr("value", $("#moduleName").val()));
						    form.append($("<input></input>").attr("type", "hidden").attr("name", "author").attr("value", $("#author").val()));
						    form.append($("<input></input>").attr("type", "hidden").attr("name", "tablePrefix").attr("value", $("#tablePrefix").val()));
						    form.append($("<input></input>").attr("type", "hidden").attr("name", "comments").attr("value", $("#comments").val()));
						    form.appendTo('body').submit().remove();
						    layer.closeAll();
					}
					// ,success: function(layero, index){
					// 	var body = layer.getChildFrame('body', index);
					// 	var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
					// 	var inputList = body.find("input");//获取到子窗口的所有的input标签
					// 	for (var i = 0; i < inputList.length; i++ ) {
					// 		$(inputList[i]).val(editList[i]); //遍历子窗口的input标签，将之前数组中的值一次放入显示
					// 	}
					// }
				});
			}
		});
	})
</script>
<script type="text/html" id="tool">
	<a class="layui-btn layui-btn-mini" lay-event="edit" data-id="{{d.staff_id}}" >代码生成</a>
<!--	<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" data-id="{{d.staff_id}}">禁用</a>-->
</script>

</body>
</html>